/**
 * @description 单条商品
 */
import React from 'react';
import classnames from "classnames";
import style from "./styles/App.less";
import { Button, Toast } from 'wd-mobile';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <div className={classnames("x-goodsItem", "x-part")} onClick={() => {
        location.href = `./goods.html#/Detail/${this.props.data.id}`;
      }}>
        <div className={"x-goodsItem-img"}>
          <div className={classnames("x-goodsItem-img-container", "wdskeleton-translate")} style={{ backgroundImage: `url(${this.props.data.goodsIcon})` }}></div>
          {
            this.props.data.stockNum <= 0 && <div className={"x-goodsItem-soldOut"}><div>售罄</div></div>
          }
          {
            this.props.data.isNoob == 1 && <div className={"x-goodsItem-newer"}>新人专享</div>
          }
        </div>
        <div className={"x-goodsItem-info"}>
          <div className={"x-goodsItem-info-name"}><span>{this.props.data.skuName}</span></div>
          <div className={"x-goodsItem-info-bottom"}>
            <div className={"x-goodsItem-info-price"}>
              {
                !!this.props.data.isSeckill && <span className={"x-goodsItem-info-price-seckill"}>秒杀</span>
              }
              ￥{this.props.data.price}<span className={"x-goodsItem-info-price-recommendPrice"}>{this.props.data.recommendPrice ? `￥${this.props.data.recommendPrice}` : ""}</span>
            </div>
            {
              this.props.showStock && <div className={"x-goodsItem-info-stock"}>
                <div className={"x-goodsItem-info-stockBg"} style={{ width: this.props.data.stockNum >= 100 ? "0%" : (100 - this.props.data.stockNum) + "%" }}></div>
                <div className={"x-goodsItem-info-stockValue"}>{this.props.data.stockNum > 100 ? "库存充足" : (this.props.data.stockNum > 0 ? `库存 ${this.props.data.stockNum}件` : "售罄")}</div>
              </div>
            }
            <div className={"x-goodsItem-info-soldNum"}>{`累计已售${this.props.data.soldNum || 0}件`}</div>
          </div>
          <Button className={classnames("x-goodsItem-buy", {
            "x-goodsItem-orderStateGray": (this.props.data.stockNum <= 0 || !this.props.data.saleStatus) && !!this.props.data.isSeckill,
            "x-goodsItem-seckillSoldOut": this.props.data.stockNum <= 0 && !this.props.data.isSeckill
          })} onClick={(e) => {
            e.stopPropagation();
            // 如果是秒杀商品，库存小于1或者不在销售状态
            if((this.props.data.stockNum <= 0 || !this.props.data.saleStatus) && !!this.props.data.isSeckill){
              return;
            }
            if (this.props.data.stockNum > 0) {
              location.href = `./goods.html#/Detail/${this.props.data.id}`;
              return;
            }
            // 预约操作
            if (this.props.data.stockNum <= 0 && !this.props.data.isSeckill) {
              if (!!this.props.data.isBook) {
                // 取消预约
                Toast.info("已取消预约", 1500);
                this.props.unBookGoods && this.props.unBookGoods();
              } else {
                // 预约
                if (!localStorage.getItem("hasBookGoods")) {
                  localStorage.setItem("hasBookGoods", "1");
                  Toast.info("商品到货后将通过微信通知您，请确认已经关注公众号”出卡啦权益“", 2000);
                } else {
                  Toast.info("预约成功", 1500);
                }
                this.props.bookGoods && this.props.bookGoods();
              }
            }
          }}>
            {
              !!this.props.data.isSeckill && (!!this.props.data.saleStatus ? (this.props.data.stockNum > 0 ? "购买" : "已抢光") : "未开始")
            }
            {
              !this.props.data.isSeckill && (this.props.data.stockNum > 0 ? "购买" : (!!this.props.data.isBook ? "已预约" : "预约"))
            }
          </Button>
        </div>
      </div>
    );
  }
}

App.defaultProps = {
  // 展示库存
  showStock: true,
};

export default App;
